<template>
    <div>
        <ul>
            <li  v-for="(item,index) in list"><input type="checkbox" v-show="show" v-model="item.checked" @change="changechecked(index)">{{item.title}}<span v-show="show" class="cha" @click="del(index)">×</span></li>
        </ul>
    </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {

    props:{
       list:Array,
       show:Boolean
    },
    data() {
        return {
           
        }
    },
    mounted() {

    },
    methods: {
        changechecked(index){
            this.$emit('changechecked',this.list,index)
        },
        del(index){
            this.$emit('del',index)
        }
    },
    computed:{
        
    }
};
</script>

<style scoped >
ul{
    list-style: none;
    width: 100%;
}
li{
    width: 380px;
    border: 1px solid black;
    margin-left: 20px;
    margin-top: 10px;
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
}
.cha{
    display: inline-block;
    float: right;
    font-size: 20px;
    font-weight: 600;
}
</style>
